import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';
import '../assets/style/carousel.less'
export default class carousel extends Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: this.props.data,
            });
        }, 100);
    }
    render() {
        window.addEventListener('touchmove', () => {
           
        }, { passive: false })
        return (
            <>
                <Carousel
                    autoplay={true}
                    infinite
                    beforeChange={this.props.beforeChange}
                    afterChange={this.props.afterChange}
                    autoplayInterval={this.props.autoplayInterval ? this.props.autoplayInterval:1000}
                >
                    {this.props.data ? this.props.data.map(val => (
                        <a
                            key={val}
                            href="###"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top', height: this.state.imgHeight }}
                                // onLoad={() => {
                                //     // fire window resize event to change height
                                //     window.dispatchEvent(new Event('resize'));
                                //     this.setState({ imgHeight: 'auto' });
                                // }}
                            />
                        </a>
                    )):''}
                </Carousel>
            </>
        )
    }
}
